<template>
    <div class="header">
        <span @click="click1" class="blue">{{leftText}}</span>
        <span>{{title}}</span>
        <span @click="click2" class="blue">{{rightText}}</span>
    </div>
</template>

<script>
export default {
    props: ['title','leftText','rightText'],

    methods: {
        click1() {
            this.$emit('click-left');
        },
        click2() {
            this.$emit('click-right');
        }
    }
}
</script>

<style lang="less">
body{background: #ebebeb;}
.header {
    height: 50px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    .blue{
        color: #1989fa;
    }
}
</style>